<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>这是一个实验平台</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
  <script src="./echarts.min.js"></script>
</head>
<body>
  <div class="container">
    <div class="first_page" id="page1">
      <div class="left_text">
        <div class="text">
          <p class="text_bold">Built for BUPTers</p>
          <p>GitHub is a development platform inspired by the way you work. From open source to business, you can host and review code, manage projects, 
          and build software alongside 50 million developers.</p>
        </div>
      </div>
      <div class="right_box">
        <div class="box">
          <div class="box_item" id="username">
            <div class="item_name">Username</div>
            <div class="item_input"><input id="input_username" type="text"></div>
          </div>
          <div class="box_item" id="email">
            <div class="item_name">Email</div>
            <div class="item_input"><input id="input_email" type="text"></div>
          </div>
          <div class="box_item" id="name_email" style="display: none;">
            <div class="item_name">Username or Email</div>
            <div class="item_input"><input id="input_name_email" type="text"></div>
          </div>
          <div class="box_item" id="password">
            <div class="item_name">Password</div>
            <div class="item_input"><input id="input_password" type="password"></div>
          </div>
          <div class="box_button">
            <button class="bt1" id="btn1">Sign Up</button>
            <button class="bt2" id="btn2">Sign In</button>
          </div>
        </div>
      </div>
    </div>
    <div class="second_page" id="page2" style="display: none;">
      <div class="left_options">
        <div class="left_option">
          <div class="option_name">原始波形选择</div>
          <div class="option_content">
            <select name="opt1" id="opt1">
              <option value="1">正弦波</option>
              <option value="2">余弦波</option>
              <option value="3">方波</option>
              <option value="4">正弦波</option>
            </select>
          </div>
        </div>
        <div class="left_option">
          <div class="option_name">原始波形选择</div>
          <div class="option_content">
            <select name="opt1" id="opt1">
              <option value="1">正弦波</option>
              <option value="2">余弦波</option>
              <option value="3">方波</option>
              <option value="4">正弦波</option>
            </select>
          </div>
        </div>
        <div class="left_option">
          <div class="option_name">原始波形选择</div>
          <div class="option_content">
            <select name="opt1" id="opt1">
              <option value="1">正弦波</option>
              <option value="2">余弦波</option>
              <option value="3">方波</option>
              <option value="4">正弦波</option>
            </select>
          </div>
        </div>
        <div class="left_option">
          <div class="option_name">匹配滤波采样时间</div>
          <div class="option_content">
            <input id="input_time" type="text">
          </div>
        </div>
        <button class="submit" onclick="showChart">生成</button>
      </div>
      <div class="right_charts">
        <div class="chart_box">
          <div class="chart_title">输入信号波形</div>
          <div class="chart_graph" id="chart1"></div>
        </div>
        <div class="chart_box">
          <div class="chart_title">输出信号波形</div>
          <div class="chart_graph" id="chart2"></div>
        </div>
      </div>
    </div>
  </div>
  <script>
  
    var myChart1 = echarts.init(document.getElementById('chart1'));
    var myChart2 = echarts.init(document.getElementById('chart2'));
      
    var page1 = document.getElementById('page1');
    var page2 = document.getElementById('page2');
    var btn1 = document.getElementById('btn1');
    var btn2 = document.getElementById('btn2');
    var box_username = document.getElementById('username');
    var box_email = document.getElementById('email');
    var box_name_email = document.getElementById('name_email');
    var username = document.getElementById('input_username');
    var email = document.getElementById('input_email');
    var name_email = document.getElementById('input_name_email');
    var password = document.getElementById('input_password');
    btn1.onclick = function(){
      if(btn1.className=='bt2'){
        btn1.className = 'bt1';
        btn2.className = 'bt2';
        box_email.style.display = 'inline';
        box_username.style.display = 'inline';
        box_name_email.style.display = 'none';
      }
      if(username.value==password.value 
      && username.value!='' 
      && email.value!='' 
      && password.value!=''){
        page1.style.display = 'none';
        page2.style.display = 'flex';
        showChart();
      }
    }
    btn2.onclick = function(){
      if(btn2.className=='bt2'){
        btn1.className = 'bt2';
        btn2.className = 'bt1';
        box_email.style.display = 'none';
        box_username.style.display = 'none';
        box_name_email.style.display = 'inline';
      }
      if(name_email.value==password.value 
      && name_email.value!='' 
      && password.value!=''){
        page1.style.display = 'none';
        page2.style.display = 'flex';
        showChart();
      }
    }
    var option1 = null;
    var option2 = null;
    function func(x) {
        return Math.sin(x)
    }
    function generateData() {
      let data = [];
      for (let i = -200; i <= 200; i += 0.1) {
        data.push([i, func(i)]);
      }
      return data;
    }
    option1 = {
      animation: true,
      grid: {
        top: 40,
        left: 50,
        right: 40,
        bottom: 50
      },
      xAxis: {
        name: 'x',
        minorTick: {
          show: true
        },
        splitLine: {
          lineStyle: {
            color: '#999'
          }
        },
        minorSplitLine: {
          show: true,
          lineStyle: {
            color: '#ddd'
          }
        }
      },
      yAxis: {
        name: 'y',
        min: -100,
        max: 100,
        minorTick: {
          show: true
        },
        splitLine: {
          lineStyle: {
            color: '#999'
          }
        },
        minorSplitLine: {
          show: true,
          lineStyle: {
            color: '#ddd'
          }
        }
      },
      dataZoom: [{
        show: true,
        type: 'inside',
        filterMode: 'none',
        xAxisIndex: [0],
        startValue: -20,
        endValue: 20
      }, {
        show: true,
        type: 'inside',
        filterMode: 'none',
        yAxisIndex: [0],
        startValue: -2,
        endValue: 2
      }],
      series: [
        {
          type: 'line',
          showSymbol: false,
          clip: true,
          data: generateData()
        }
      ]
    };
    option2 = option1;

    function showChart(){
      myChart1.clear();
      myChart2.clear();
      myChart1.setOption(option1, true);
      myChart2.setOption(option2, true);
      window.addEventListener("resize",function() {
        myChart1.resize();
        myChart2.resize();
      });
    }

  </script>
</body>
</html>